<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .center{
            width: 1200px;
            margin: 0 auto;
        }
        #footer_center p{
            margin: 0;
        }
        #footer_center h3{
            color: white;
        }
        body{
            background-color: rgb(241,242,243);
        }
        .el-header{
            background-color: white;
        }
        p:hover {
            color:deepskyblue ;
        }
        .vodeolist img:hover {
            transform: scale(1.2);
        }
        .el-card a div{
            display:none;
        }
        .el-card a:hover div{
            display:block;
        }
        .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background-image: url('img/plyingbutton.jpg');
            background-size: cover;
            opacity: 0;
        }
        a:hover .play-button {
            opacity: 1;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <my-header></my-header>
        <el-main class="center" >
            <el-carousel height="375px">
                <el-carousel-item v-for="b in bannerArr">
                    <img :src="b.imgUrl" width="100%">
                </el-carousel-item>
            </el-carousel>
            <!--视频开始-->
            <el-row style="background-color: white">
                <el-col span="3">
                    <p style="font-size: 28px;line-height: 65px;margin: 0">学习视频</p>
                </el-col>
                <el-col span="21">
                    <!--视频导航开始-->
                    <el-menu mode="horizontal" default-active="0" @select="videoSelect" active-text-color="orange">
                        <el-menu-item index="0">全部</el-menu-item>
                        <el-menu-item v-for="c in videoCategoryArr" :index="c.id">{{c.name}}</el-menu-item>
                    </el-menu>
                    <!--视频导航结束-->
                </el-col>
            </el-row>
            <!--视频列表开始-->
            <el-row gutter="20">
                <el-col v-for="r in videoArr" span="6">
                    <el-card style="margin: 10px 0">
                        <a class="vodeolist" style="color: #333;text-decoration: none; position: relative; display: inline-block;" :href="'/video.html?bvid='+r.bvid">
                            <img :src="r.imgurl" width="100%" height="144" style="cursor: pointer;">
                            <div class="play-button"></div>
                            <p style="height: 40px; cursor: pointer;">{{r.title}}</p>
                        </a>
                    </el-card>
                </el-col>
            </el-row>
            <div style="text-align: center;margin-bottom: 20px">
                <el-button>点击查看更多视频</el-button>
            </div>
            <!--视频列表结束-->
            <!--视频结束-->
        </el-main>
        <el-footer style="height: 350px;background-color: darkgrey;padding:50px 0">
            <my-footer></my-footer>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入Axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!--引入自己的js文件-->
<script src="js/my-header.js"></script>
<script src="js/my-footer.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                bannerArr:[],
                recipeArr:[],
                videoCategoryArr:[],
                videoArr:[]
            }
        },
        methods: {
            videoSelect(key,path){
                this.loadContent(key);
            },
            loadContent(categoryId){
                //发请求获取数据
                axios.get("/v1/contents/"+categoryId+"/videoindex")
                    .then(function (response) {
                        if (response.data.code == 1)
                            v.videoArr = response.data.data;
                    })
            }
        },
        created:function () {
            //发送视频列表请求
            axios.get("/v1/VideoInfo/").then(function (response) {
                v.recipeArr = response.data.data;
            })
            //请求视频相关分类数据
            axios.get("/v1/categories/video_categories").then(function (response) {
                if (response.data.code == 1){
                    v.videoCategoryArr = response.data.data;
                }
            })
        }
    })
</script>
</html>